<template>
    <div class="record-content">
        <div class="title">
            <h3>车辆通行记录<span>Vehicle traffic record</span></h3>
        </div>
        <table>
            <tr>
                <th>类型</th>
                <th>设备</th>
                <th>时间</th>
                <th>车牌截图</th>
            </tr>
            <tr>
                <td><font-awesome-icon class="icon-car icon" :icon="['fas', 'car']" /></td>
                <td>1001</td>
                <td>2020-12-27</td>
                <td></td>
            </tr>
            <tr>
                <td><font-awesome-icon class="icon-truck icon" :icon="['fas', 'truck']" /></td>
                <td>1002</td>
                <td>2020-12-27</td>
                <td></td>
            </tr>
            <tr>
                <td><font-awesome-icon class="icon-motorcycle icon" :icon="['fas', 'motorcycle']" /></td>
                <td>1003</td>
                <td>2020-12-27</td>
                <td></td>
            </tr>
            <tr>
                <td><font-awesome-icon class="icon-bus icon" :icon="['fas', 'bus']" /></td>
                <td>1004</td>
                <td>2020-12-27</td>
                <td></td>
            </tr>
        </table>
        <div class="small-title">
            <h3>停车场摄像</h3>
        </div>
        <div class="monitor">
            <p>设备</p>
            <div class="big-image">
                <video src="/haiyuan/static/video/location.mp4" autoplay muted loop="loop"></video>
            </div>
            <div class="min-image">
                <video src="/haiyuan/static/video/VID20210129101414_cps.mp4" autoplay muted loop="loop"></video>
                <video src="/haiyuan/static/video/zm.mp4" autoplay muted loop="loop"></video>
                <video src="/haiyuan/static/video/zm.mp4" autoplay muted loop="loop"></video>
                <video src="/haiyuan/static/video/zm.mp4" autoplay muted loop="loop"></video>
            </div>
        </div>
    </div>
</template>

<script>
export default {}
</script>

<style lang="less" scoped>
@import '../../../assets/less/school.less';
.record-content {
    width: 350px;
    padding-right: 15px;
    margin-top: 10px;
    table {
        width: 100%;
        color: #fff;
        tr {
            width: 100%;
            height: 30px;
            margin: 20px 0;
            line-height: 30px;
            display: flex;
            background: #9499cf;
            .icon {
                font-size: 20px;
            }
            th {
                flex: 1;
                font-size: 16px;
                text-align: center;
            }
            td {
                flex: 1;
                font-size: 12px;
                text-align: center;
            }
        }
    }
    .monitor {
        p {
            color: #fff;
            font-size: 16px;
            padding: 5px 0;
            padding-left: 15px;
            margin-top: 10px;
            background: #9499cf;
        }
        .big-image {
            margin-top: 25px;
            width: 100%;
            video {
                width: 100%;
                height: 100%;
            }
        }
        .min-image {
            width: 100%;
            margin-top: 10px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            video {
                width: 47.5%;
                height: 100%;
                margin-bottom: 15px;
            }
        }
    }
}
</style>